<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../js/layer/theme/default/layer.css" />
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/index.js" type="text/javascript" charset="utf-8"></script>

		<title>首页</title>
	</head>

	<body>
		<div id="container">
			<div class="container-box">
				<div class="bg">
					<!--<img src="../img/bg_text.png" alt="" class="bg_text" />
					<img src="../img/figure_2.png" alt="" class="figure_left" />
					<img src="../img/figure_3.png" alt="" class="figure_right" />
					<img src="../img/figure_1.png" alt="" class="figure_bottom" />-->
					<!--<img :src="cloudUrl+'icpn.png'"/>-->
					<div class="sponsor">
						<div class="sponsor-unit">
							<span>主办单位：</span><span v-text="sponsorUnit"></span>
						</div>
						<div class="voting-rules" @click="votingRules()">投票规则></div>
					</div>
				</div>
				<div class="flower-border">
					<ul class="home-tab">
						<li @click="tabHome()" :class="{active:tabId==0}"></li>
						<li @click="tabRank()" :class="{active:tabId==1}"></li>
					</ul>
				</div>
				<div class="home-page-box">
					<!--首页-->
					<div class="home-page" v-show="tabId===0">
						<div class="content">
							<div class="search">
								<input type="text" name="" id="" value="" placeholder="请输入编号或名称" v-model="homeText" />
								<button class="search-bt" @click="search()"></button>
							</div>
							<div class="video-content" v-for="(items,index) in list" :class="index%2 == 0?'video-even':null">
								<div class="play-video">
									<img :src="items.pic" alt="" class="video" />
									<div class="user-number">
										<span v-text="items.number" class="number-text"></span>
									</div>
									<img src="../img/play.png" alt="" class="play" @click="phoneNumber()" />
									<div class="votes">
										<span v-text="items.votes+' 票'"></span>
									</div>
									<div class="team-name">
										<div v-text="items.name"></div>
									</div>
									<div class="vote-content">
										<div class="vote-bt" @click="showVote()">
											<img src="../img/votenotclick.png" class="vote" />
											<div class="vote-box">
												<span>投票</span>
											</div>
										</div>
										<div class="gift-bt" @click="showGift()">
											<img src="../img/giftnotclick.png" class="gift" />
											<div class="gift-box">
												<span>礼物</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="nodata-content" v-if="list.length==0">
							<div class="content">
								<div class="nodata-box">
									<img src="../img/nodata.png" alt="" class="nodata" />
									<p>查无此数据</p>
									<p>请核实编号/队名是否正确无误</p>
								</div>
							</div>
						</div>

					</div>
					<!--排行页面-->
					<div class="rank-page" v-show="tabId===1">
						<div class="content">
							<div class="search">
								<input type="text" name="" id="user" value="" placeholder="请输入编号或名称" v-model="rankText" />
								<button class="search-bt" @click="searchRank()"></button>
							</div>
							<div class="ranking-content" v-for="(items,index) in rankList">
								<div class="ranking-content-box">
									<div class="ranking" :class="index == 0?'ranking-top':null">
										<span v-text="'No.'+items.No"></span>
									</div>
									<div class="ranking-number-box">
										<div class="ranking-video">
											<img src="../img/video.png" alt="" class="ranking-video-pic" />
										</div>
										<div class="ranking-name">
											<span v-text="items.number"></span>
											<span v-text="items.name"></span>
										</div>
									</div>
									<div class="ranking-votes">
										<span v-text="items.votes+' 票'"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="nodata-content" v-if="rankList.length==0">
							<div class="content">
								<div class="nodata-box">
									<img src="../img/nodata.png" alt="" class="nodata" />
									<p>查无此数据</p>
									<p>请核实编号/队名是否正确无误</p>
								</div>
							</div>
						</div>
					</div>
					<div class="bottom-picture"></div>
					<img v-show="tabId==0" src="../img/giftpackage.png" class="gift-package" @click="btShop()" />

				</div>

			</div>
			<!--投票规则-->
				<div class="voting-rules-lay">
					<img src="../img/close.png" class="close-pic" />
					<div class="voting-rules-lay-content">
						<div class="voting-rules-title">
							<p>设网络投票人气奖，以省区市为单位，选取获得网络投票数最多的1支参赛队，颁发奖金10000元、奖牌和获奖证书。</p>
						</div>
						<div class="voting-rules-innr">
							<p class="voting-rules-innr-title">投票方式:</p>
							<p>1、为保证投票公平性，在投票前需要验证手机号，每个手机号每天可免费投5票；</p>
							<p>2、每个手机号可购买 鲜花进行投票，每束鲜花5元，每束鲜花等于5票，每天每个手机号至多可购买5束；</p>
							<p class="voting-rules-innr-title">投票时间：</p>
							<p>网络平台开放日至2019年11月08日</p>
							<p class="voting-rules-innr-title">声明：</p>
							<p>严禁刷票，如发现刷票行为，则封号且之前投票数归零。</p>
						</div>
						<div class="voting-rules-code">
							<img src="" class="qr-code" />
						</div>
						<div class="voting-rules-foot">
							<p>长按识别二维码，</p>
							<p>下载靠谱e家APP获得更多投票数，</p>
							<p>让科技幸福每个家庭</p>
						</div>
					</div>
				</div>
			<!--投票-->
			<div class="vote-lay">
				<div class="lay-content">
					<div class="lay-img">
						<img src="../img/bigvote.png" alt="" class="lay-img-vote">
					</div>
					<span class="lay-reminde">一个赞等于1票</span>
					<div class="lay-num-vote">
						<span>库存数量</span>
						<div class="lay-number">
							<div class="reduce" @click='reduce()'>-</div>
							<input type="number" class="lay-val" v-model='sacval' onKeyUp="value=value.replace(/\D/g,'');if(this.value.length>6) this.value=this.value.substr(0,6)"  pattern="[0-9]*">
							<div class="add" @click='add()'>+</div>
						</div>
					</div>
					<div class="lay-tip">提示：每天每个手机号10个点赞数</div>
				</div>
				<input class="lay-bottom" type="button" @click="vote()">
			</div>
			<!--购买礼物-->
			<div class="gift-lay">
				<div class="lay-content">
					<div class="lay-img-box">
						<img src="../img/flower.png" alt="" class="lay-img-flower">
					</div>
					<span class="lay-reminde-flower">每束鲜花等于5票，每束鲜花5元</span>
					<div class="lay-num-gift">
						<span>库存数量</span>
						<div class="lay-number">
							<div class="reduce" @click='reduce()'>-</div>
							<input type="number" class="lay-val" v-model='sacval' onKeyUp="value=value.replace(/\D/g,'');if(this.value.length>6) this.value=this.value.substr(0,6)"  pattern="[0-9]*">
							<div class="add" @click='add()'>+</div>
						</div>
					</div>
					<div class="lay-tip">提示：每天每个手机号至多可购买5束虚拟礼物购买后不予退还</div>
				</div>
				<input class="lay-gift" type="button" @click="sendGift()" />
				<input class="lay-buy" type="button" @click="buyGift()">
			</div>
			<!-- 送礼物成功 -->
			<div class="lay-success-gift">
				<div class="lay-tier">
					<img class="lay-flower-pic" src="../img/flower.png" alt="" />
					<div class="lay-tier-content" v-for="items in lay">
						<span class="tier-name">为编号{{items.name}}</span>
						<span class="tier-num">成功献上{{items.num}}束鲜花（等于{{items.num*5}}票）</span>
					</div>
				</div>
			</div>
			<!-- 购买礼物成功 -->
			<div class="lay-success-buy">
				<div class="lay-tier">
					<img class="lay-flower-img" src="../img/flower.png" alt="" />
					<span class="tier-name">成功购买{{num}}束鲜花</span>
				</div>
			</div>
			<!--投票成功-->
			<div class="lay-success-vote">
				<div class="lay-tier">
					<img class="lay-img-hook" src="../img/bigvote.png" alt="" />
					<div class="lay-tier-content" v-for="items in lay">
						<span class="tier-name">投票成功</span>
					</div>
				</div>
			</div>
			<!--输入手机号弹窗-->
			<div class="phone-lay">
				<div class="phone-lay-box">
					<input type="tel" name="" id="" value="" placeholder="请输入手机号" class="tel" />
					<div class="verification-code">
						<input type="text" name="" id="" value="" placeholder="请输入手机验证码 " />
						<span>获取验证码</span>
					</div>
				</div>
				<div class="phone-lay-tip">
					为保证投票公平性，在投票前需要验证手机号
				</div>
			</div>
		</div>

		</div>
		<script type="text/javascript">
			new Vue({
				el: '#container',
				data: {
					sponsorUnit: '国家体育总局健身气功管理中心/中国健身气功协会',
					tabId: 0,
					sacval: 1,
					num: 5,
					homeText: '',
					rankText: '',
					//					cloudUrl:cloudUrl
					list: [{
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc002',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc003',
							name: '天心区靠谱队',
							votes: '123450'
						}, {
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						},{
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc002',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc003',
							name: '天心区靠谱队',
							votes: '123450'
						}, {
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						},{
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc002',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc003',
							name: '天心区靠谱队',
							votes: '123450'
						}, {
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						},{
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc002',
							name: '天心区靠谱队',
							votes: '123450'
						},
						{
							pic: '../img/video.png',
							number: 'yc003',
							name: '天心区靠谱队',
							votes: '123450'
						}, {
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450'
						}
					],
					searchList:[],
					rankList: [{
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450',
							No: '1'
						},
						{
							pic: '../img/video.png',
							number: 'yc002',
							name: '天心区靠谱队',
							votes: '123450',
							No: '2'
						},
						{
							pic: '../img/video.png',
							number: 'yc003',
							name: '天心区靠谱队',
							votes: '123450',
							No: '3'
						}, {
							pic: '../img/video.png',
							number: 'yc001',
							name: '天心区靠谱队',
							votes: '123450',
							No: '4'
						},
						{
							pic: '../img/video.png',
							number: 'yc002',
							name: '天心区靠谱队',
							votes: '123450',
							No: '5'
						},
						{
							pic: '../img/video.png',
							number: 'yc003',
							name: '天心区靠谱队',
							votes: '123450',
							No: '6'
						}
					],
					searchRankList: [],
					lay: [{
						name: 'YC25648',
						num: '2'
					}]
				},

				mounted() {
					this.initInput()
					this.getList()
				},
				watch: {
					rankText(now, old) {
						if(old != '' && now == '') {
							this.getRank()
						}
					},
					homeText(now, old) {
						if(old != '' && now == '') {
							this.getList()
						}
					}

				},
				methods: {
					getList() {
						var self = this
						$.ajax({
							type: 'post',
							url: '',
							data: {},
							success: function(res) {
								self.list = res.list
							}
						});
					},
					tabHome() {
						//						切换到首页
						this.tabId = 0;
					},
					tabRank() {
						//						切换到排行
						this.tabId = 1;
						if(this.rankList=='')this.getRank()
					},
					getRank() {
						//						获取排行
						var self = this
						$.ajax({
							type: 'post',
							url: '',
							data: {},
							success: function(res) {
								self.rankList = res.rankList
							}
						})
					},
					btShop() {
						window.location.href = "shop.html"
					},
					votingRules() {
						//						投票规则
						var votingRules = layer.open({
							type: 1,
							title: false,
							shade: 0.6,
							closeBtn: false,
							isOutAnim: false,
							area: ['6.15rem', '11.03rem'],
							content: $('.voting-rules-lay'),
							success: () => {
								$('.close-pic').click(() => {
									layer.close(votingRules)
								})
							}
						})
					},
					showVote() {
						//						投票弹窗
						this.sacval=1
						this.voteBtn = layer.open({
							type: 1,
							title: false,
							shade: 0.6,
							closeBtn: false,
							isOutAnim: false,
							//		                    scrollbar: false,
							area: ['4.69rem', '7.08rem'],
							content: $('.vote-lay'),
							success: () => {
								$('.layui-layer-shade').click(() => {
									layer.close(this.voteBtn)
								})
							}
						})
					},
					vote() {
						//						投票成功

						layer.open({
							type: 1,
							title: false,
							shade: 0.1,
							closeBtn: false,
							isOutAnim: false,
							area: ['2.8rem', '3rem'],
							content: $('.lay-success-vote'),
							time: 1000
						})
						var self = this
						$.ajax({
							type: 'post',
							url: '',
							data: {},
							success: function(res) {
								if(res.code == 1) {
									layer.open({
										type: 1,
										title: false,
										shade: 0.1,
										isOutAnim: false,
										closeBtn: false,
										area: ['2.8rem', '3rem'],
										content: $('.lay-success-vote'),
										time: 1000
									})
								} else {
									layer.msg('投票失败', {
										time: 1000
									})
								}
							}
						})
					},
					sendGift() {
						//						送礼物请求
						layer.open({
							type: 1,
							title: false,
							shade: 0.1,
							closeBtn: false,
							isOutAnim: false,
							area: ['2.8rem', '3rem'],
							content: $('.lay-success-gift'),
							time: 1000
						});
						var self = this
						$.ajax({
							type: 'post',
							url: '',
							data: {},
							success: function(res) {
								if(res.code == 1) {
									layer.open({
										type: 1,
										title: false,
										shade: 0.1,
										closeBtn: false,
										isOutAnim: false,
										area: ['2.8rem', '3rem'],
										content: $('.lay-success-gift'),
										time: 1000
									});
								} else {
									layer.msg('送礼失败', {
										time: 1000
									})
								}
							}
						})

					},
					buyGift() {
						// 购买礼物
						layer.open({
							type: 1,
							title: false,
							shade: 0.1,
							closeBtn: false,
							isOutAnim: false,
							area: ['2.8rem', '3rem'],
							content: $('.lay-success-buy'),
							time: 1000,
						})
						var self = this
						$.ajax({
							type: 'post',
							url: '',
							data: {},
							success: function(res) {
								if(res.code == 1) {
									layer.open({
										type: 1,
										title: false,
										shade: 0.1,
										closeBtn: false,
										isOutAnim: false,
										area: ['2.8rem', '3rem'],
										content: $('.lay-success-buy'),
										time: 1000,
									})
								} else {
									layer.msg('购买失败', {
										time: 1000
									})
								}
							}
						})
					},
					initInput() { //优化input不回弹bug
						$("input").blur(function() {
							setTimeout(function() {          
								var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;          
								window.scrollTo(0, Math.max(scrollHeight - 1, 0));       
							}, 100);
						})
					},
					showGift() {
						//						礼物弹窗
						this.sacval=1
						this.giftBtn = layer.open({
							type: 1,
							title: false,
							shade: 0.6,
							closeBtn: false,
							isOutAnim: false,
							area: ['5.27rem', '7.11rem'],
							content: $('.gift-lay'),
							success: () => {
								$('.layui-layer-shade').click(() => {
									
									
									layer.close(this.giftBtn)
								})
							}
						})
					},

					reduce() {
						this.sacval--;
						if(this.sacval < 1) {
							this.sacval = 1;
							layer.msg('不能等于0', {
								time: 1000
							})
						}
					},
					add() {
						this.sacval++;
					},
					search() {
						//						首页搜索
						if(this.homeText == '') {
							layer.msg('请输入选手编号', {
								time: 1000
							})
							this.getList()
						} else {
							var self = this
							var searchList = []
							self.list = searchList
							//							$.ajax({
							//								type: 'post',
							//								url: '',
							//								data: {},
							//								success: function(res) {
							//									if(res.code == 1) {
							//										self.list = res.searchList;
							////										self.hasdata = true
							//									} else {
							//										self.list = []
							////										self.hasdata = false
							//									}
							//								}
							//							})
						}
					},
					searchRank() {
						if(this.rankText == '') {
							layer.msg('请输入选手编号')
							this.getRank()
						} else {
							var self = this
							var ranklist = []
							self.rankList = ranklist
							//								$.ajax({
							//									type: 'post',
							//									url: '',
							//									data: {},
							//									success: function(res) {
							//										if(res.code == 1) {
							//											self.rankList = res.searchList;
							//											//										self.hasdata = true
							//										} else {
							//											//										self.hasdata = false
							//
							//										}
							//									}
							//								})
						}
					},

					//					checkVal() {
					//						$("#user").on('input propertychange', () => {
					//							if(!this.test(this.searchText)) {
					//								this.getRank()
					//							} else {
					////								
					//							}   
					//						})     
					//
					//					},
					phoneNumber() {
						//						登录弹窗
						this.phoneNumberBt = layer.open({
							type: 1,
							title: false,
							shade: 0.6,
							closeBtn: false,
							isOutAnim: false,
							area: ['5.27rem', '6.48rem'],
							content: $('.phone-lay'),
							success: () => {
								$('.layui-layer-shade').click(() => {
									layer.close(this.phoneNumberBt)
								})
								$('.closer').click(() => {
									layer.close(this.phoneNumberBt)
								})
							}
						})
					}
				}
			})
		</script>
	</body>

</html>